<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        background-color: #cccccc;
    }

    #contain {
        width: 200px;
        height: 400px;
        background-color: white;
        border-left: solid black;
        border-width: 200px;
        border-radius: 50%;
        position: relative;
        animation: rotation 2.5s linear infinite;
        -webkit-animation: rotation 2.5s linear infinite;
        -moz-animation: rotation 2.5s linear infinite;
    }

    #contain::before {
        content: "";
        width: 40px;
        height: 40px;
        left: -100px;
        border: 80px solid black;
        background-color: white;
        border-radius: 50%;
        position: absolute;
    }

    #contain::after {
        content: "";
        width: 40px;
        height: 40px;
        top: 200px;
        left: -100px;
        border: 80px solid white;
        background-color: black;
        border-radius: 50%;
        position: absolute;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-360deg);
        }
    }

    @-webkit-keyframes rotation {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(-360deg);
        }
    }

    @-moz-keyframes rotation {
        0% {
            -moz-transform: rotate(0deg);
        }

        100% {
            -moz-transform: rotate(-360deg);
        }
    }
</style>

<body>
    <div id="contain"></div>
</body>

</html>